import { t } from 'i18next'
import { useData } from './hook'
import {
	CheckedIcon,
	CheckIcon,
	CheckDisabledIcon,
	NextPageIcon,
	NextPageDisabledIcon,
	PrePageDisabledIcon,
	PrePageIcon,
	StyledFooterWrap,
	StyledViewWrap,
	StyledWrapBlock,
} from './style'
import { Button, Modal } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import Alert from '@/components/Alert'
// import { useTvWallStore } from '../store'
import { boxPositionsEntity } from '@/api/manager/tvwall/interface'
import { useEffect } from 'react'
import { useMeetingTVWallStore } from '../store'
import React from 'react'

interface AddStyleModalProps {
	callBack: (data: any) => {}
}

export const AddStyleModal = (props: AddStyleModalProps) => {
	const { callBack } = props

	const { update, config, isAddStyleModalOpen, my_used_style } = useMeetingTVWallStore(
		(state) => ({
			update: state.update,
			config: state.config,
			isAddStyleModalOpen: state.isAddStyleModalOpen,
			my_used_style: state.used_style_map,
		}),
		shallow
	)

	const { pageData, updatePage, handleClickView } = useData()
	useEffect(() => {
		if (isAddStyleModalOpen) {
			updatePage({ newSelectedStyleMap: [], chnnlConflict: [], nowPage: 0 })
		}
	}, [isAddStyleModalOpen])
	useEffect(() => {
		let _result = my_used_style.map((item) => item?.id)
		updatePage({ tvwall_styleId_list: _result })
	}, [my_used_style, isAddStyleModalOpen])

	/**计算小方块位置 */
	const returnNormalWrap = (positionItem: boxPositionsEntity) => {
		const { box_x, box_y, box_width, box_height } = positionItem
		let rate = config.previewW / config.containerW
		let _left = box_x * rate
		let _right = box_y * rate
		let _width = box_width * rate
		let _height = box_height * rate
		return <StyledWrapBlock left={_left} top={_right} width={_width} height={_height}></StyledWrapBlock>
	}

	const Footer = (
		<StyledFooterWrap>
			<div className="operate_add_modal">
				<Button
					disabled={!pageData.enableOk}
					onClick={() => {
						const { newSelectedStyleMap, tvwall_styleId_list, resPonseSource } = pageData
						const _new_selected_length = newSelectedStyleMap.length /**新选中的风格延时 */
						const _have_selected_length = tvwall_styleId_list.length /**已被选中的风格样式 */
						if (_new_selected_length === 0 && _have_selected_length === 0) {
							Alert(t('请选择电视墙风格'))
							return false
						}
						if (_new_selected_length + _have_selected_length > 4) {
							Alert(t('最多只能选择4个电视墙风格'))
							return false
						}
						/**返回新被选中的数据 */
						let result = resPonseSource.filter((item) => {
							return newSelectedStyleMap.includes(item.id)
						})
						callBack(result)
						update({ isAddStyleModalOpen: false })
					}}
				>
					{t('添加')}
				</Button>
				<div className="slider"></div>
				<Button
					onClick={() => {
						update({ isAddStyleModalOpen: false })
						updatePage({ newSelectedStyleMap: [], chnnlConflict: [] })
					}}
				>
					{t('取消')}
				</Button>
			</div>
		</StyledFooterWrap>
	)
	return (
		<Modal
			width={880}
			height={460}
			open={isAddStyleModalOpen}
			title={t('添加电视墙')}
			footer={Footer}
			onOk={() => {}}
			onCancel={() => {
				update({ isAddStyleModalOpen: false })
			}}
		>
			<StyledViewWrap className="tvwall-style-wrap">
				<div className="content">
					<ul className="style-list">
						{pageData.pageViewMap[pageData.nowPage] &&
							pageData.pageViewMap[pageData.nowPage].map((item, index) => {
								/**分格的id */
								const _id = item.id
								/**是否不可点击 */
								let isDisable = pageData.tvwall_styleId_list.includes(_id)
								/**是否被选中 */
								let isChecked = pageData.newSelectedStyleMap.includes(_id)
								/**是否冲突*/
								let isConflect = pageData.chnnlConflict.includes(_id)
								return (
									<li
										className="view-li"
										onClick={() => {
											handleClickView(_id)
										}}
										key={index}
									>
										<div className="view-li-check">
											{!isDisable && !isChecked && <CheckIcon></CheckIcon>}
											{!isDisable && isChecked && <CheckedIcon></CheckedIcon>}
											{isDisable && <CheckDisabledIcon></CheckDisabledIcon>}
										</div>
										<div className="view-content">
											<div className={`bgPreview ${isConflect ? 'conflict' : ''}`}>
												{item.positions.map((value: boxPositionsEntity, i) => {
													return (
														<React.Fragment key={i}>
															{returnNormalWrap(value)}
														</React.Fragment>
													)
												})}
											</div>
											<div
												className="tv-box-name ellipsis tvwall-name-ellipsis"
												title={item.name}
											>
												{item.name}
											</div>
										</div>
									</li>
								)
							})}
					</ul>
					<div className="pageManager">
						{pageData.nowPage !== 0 && (
							<span
								onClick={() => {
									let _result = pageData.nowPage - 1
									updatePage({ nowPage: _result })
								}}
							>
								<PrePageIcon></PrePageIcon>
							</span>
						)}
						{pageData.nowPage === 0 && <PrePageDisabledIcon></PrePageDisabledIcon>}
						{pageData.nowPage < pageData.totalPage - 1 && (
							<span
								onClick={() => {
									let _result = pageData.nowPage + 1
									updatePage({ nowPage: _result })
								}}
							>
								<NextPageIcon></NextPageIcon>
							</span>
						)}
						{pageData.nowPage === pageData.totalPage - 1 && <NextPageDisabledIcon></NextPageDisabledIcon>}
					</div>
					<div className="tips-wrap">
						{!pageData.enableOk && (
							<span className="tips">{t('所选电视墙风格中通道重复，请重新选择。')}</span>
						)}
					</div>
				</div>
			</StyledViewWrap>
		</Modal>
	)
}
